<template>
	<view class="" v-if="pageShow">
		<view class="">
			<!-- order_status 订单状态:10=待支付,20=待入住,30=已入住,40=已完成,-10=已取消 -->
			<!-- comment_status 评价状态:10=未评价,20=已评价 -->
			<view class="ffffff mainpadding flexcenter margin_top" v-if="dataAll.order_status==-10">
				<view class="">
					<view class="bigtext fonweight zhonghei textcenter">已取消</view>
					<view class="ershil zhonghei textcenter margin_top2">订单已取消</view>
				</view>
			</view>
			<view class="ffffff mainpadding flexcenter margin_top" v-if="dataAll.order_status==10">
				<view class="">
					<view class="bigtext fonweight zhonghei textcenter">待支付</view>
					<view class="ershil zhonghei textcenter margin_top2">订单已提交</view>
					<view class="flexcenter margin_top5">
						<view class="qxbtn flexcenter margin_right3" @click="cancelorder(dataAll.id)">取消</view>
						<view class=" xhbtn flexcenter " @click="atoncepay(dataAll)">立即支付</view>
					</view>
				</view>
			</view>
			<view class="ffffff mainpadding flexcenter margin_top" v-if="dataAll.order_status==20">
				<view class="">
					<view class="bigtext fonweight zhonghei textcenter">待入住</view>
					<view class="ershil zhonghei textcenter margin_top2">请您在{{dataAll.start_date_text}}前入住</view>
					<view class="flexcenter margin_top5">
						<view class="qxbtn flexcenter margin_right3" @click="cancelorder(dataAll.id)">取消</view>
					</view>
				</view>
			</view>
			<view class="ffffff mainpadding flexcenter margin_top" v-if="dataAll.order_status==30">
				<view class="">
					<view class="bigtext fonweight zhonghei textcenter">已入住</view>
					<view class="ershil zhonghei textcenter margin_top2">请您在{{dataAll.end_date_text}}前住离</view>
				</view>
			</view>
			<view class="ffffff mainpadding flexcenter margin_top" v-if="dataAll.order_status==40">
				<view class="">
					<view class="bigtext fonweight zhonghei textcenter">已完成</view>
					<view class="ershil zhonghei textcenter margin_top2">感谢您的支持，期待您的下次入住！</view>
				</view>
			</view>
			<!--  -->
			<view class="ffffff mainpadding ">
				<view class="margin_right1 ershiba xiaohui">入离日期：
					<text
						class="margin_right1 ershiba zhonghei">{{dataAll.start_date_text}}至{{dataAll.end_date_text}}</text>
				</view>
				<view class="margin_right1 ershiba xiaohui margin_top2">支付金额：
					<text class="margin_right1 ershiba zhonghei">￥{{dataAll.pay_price}}</text>
				</view>
			</view>
			<!-- 房屋信息 -->
			<view class="ffffff mainpadding margin_top">
				<view class="ershiba zhonghei">房屋信息</view>
				<view class="flexbetween margin_top">
					<image class="sptp" :src="dataAll.hoteltype.image_text" mode=""></image>
					<view class="flexbetween" style="width: 75%;">
						<view class="">
							<view class="sanshier zhonghei xiankuan1">{{dataAll.hoteltype.name}}</view>
							<view class="flexleft margin_top">
								<view class="ershiba xiaohong margin_right1">￥{{dataAll.pay_price}}</view>
								<!-- <view class="xiaohui zhonghuax ershiba">￥156.00</view> -->
							</view>
						</view>
						<!-- <u-icon name="arrow-right" color="#999999"></u-icon> -->
					</view>
				</view>
				<view class="flexbetween margin_top">
					<view class="" style="width: 92%;">
						<view class="xiaohui strongtext yhxk">{{dataAll.hotel.detail}}</view>
						<view class="xiaohui strongtext margin_top2">据您直线距离{{returnKmUnit(Number(dataAll.distance))}}
						</view>
					</view>
					<image class="dticon" src="../static/images/system/dh1.png" mode="" @click="openlocation()"></image>
				</view>
			</view>
			<view class="ffffff mainpadding margin_top">
				<view class="zhonghei bigtext">订单信息</view>
				<view class="flexbetween margin_top">
					<view class="flexleft">
						<view class="zhonghei ershiba kuandu">订单编号：</view>
						<view class="zhonghei ershiba">{{dataAll.order_no}}</view>
					</view>
					<view class="xiaocheng ershiba" @click="copy(dataAll.order_no)">复制</view>
				</view>
				<view class="flexleft margin_top">
					<view class="zhonghei ershiba kuandu">入住人：</view>
					<view class="zhonghei ershiba">{{dataAll.proposer.name}}</view>
				</view>
				<view class="flexleft margin_top">
					<view class="zhonghei ershiba kuandu">联系电话：</view>
					<view class="zhonghei ershiba">{{dataAll.proposer.mobile}}</view>
				</view>
				<view class="flexleft margin_top">
					<view class="zhonghei ershiba kuandu">支付方式：</view>
					<view class="zhonghei ershiba">{{dataAll.pay_type==10?"微信支付":"余额支付"}}</view>
				</view>
				<view class="flexleft margin_top">
					<view class="zhonghei ershiba kuandu">下单时间：</view>
					<view class="zhonghei ershiba">{{dataAll.createtime_text}}</view>
				</view>
			</view>
		</view>
		<view class="gudingdb ffffff mainpadding flexright">
			<view class="huibtn flexcenter margin_left" v-show="dataAll.order_status==10||dataAll.order_status==20"
				@click.stop="cancelorder(dataAll.id)">取消</view>
			<view class="huangbtn flexcenter margin_left" v-show="dataAll.order_status==10"
				@click.stop="atoncepay(dataAll)">立即支付</view>
			<view class="huibtn flexcenter margin_left" v-show="dataAll.order_status==40 || dataAll.order_status==-10"
				@click.stop="delorder(dataAll.id)">删除订单</view>
			<view class="huangbtn flexcenter margin_left" v-show="dataAll.order_status==40 && dataAll.comment_status==10"
				@click.stop="pingjia(dataAll.id)">立即评价</view>
			<view class=""v-if="dataAll.order_status==40 && dataAll.is_openfp==1">
				<view class="huangbtn flexcenter margin_left" v-if="dataAll.openfg_status==1" @click.stop="kaijufp(dataAll.id)">开具发票</view>
				<view class="huibtn flexcenter margin_left" style="width: 180rpx;" v-if="dataAll.openfg_status==2">发票开具中</view>
				<view class="huangbtn flexcenter margin_left" v-if="dataAll.openfg_status==3" @click.stop="tzxq(dataAll.user_fp_id,dataAll.id)">查看发票</view>
			</view>
		</view>
	</view>
</template>

<script>
	const httpRequest = require("@/common/httpRequest.js")
	export default {
		data() {
			return {
				listid: "",
				dataAll: {},
				pageShow: false
			}
		},
		onLoad(options) {
			this.listid = options.id
			// #ifdef MP-WEIXIN
			this.getlocation()
			// #endif
		},
		onShow() {
			if(this.pageShow){
				this.init()
			}
			// #ifdef H5
			this.init()
			// #endif
		},
		methods: {
			tzxq(id,pid) {
				uni.navigateTo({
					url: '/pages_wode/fapiaoxq?data_type=1&id='+id+"&pid="+pid
				})
			},
			kaijufp(id){
				uni.navigateTo({
					url:"/pages_wode/kaijufp?data_type=1&id="+id
				})
			},
			pingjia(id){
				uni.navigateTo({
					url:'/pages_wode/pingjiajd?type=2&id='+id
				})
			},
			atoncepay(item) {
				let data = {
					id: item.id,
					pay_price: item.pay_price,
					type: 1,
				}
				uni.navigateTo({
					url: '/pages_shouye/dingdanzf?msg=' + encodeURIComponent(JSON.stringify(data))
				})
			},
			// 删除订单
			delorder(id) {
				httpRequest.modal('', '确认删除当前订单吗？', true, (res) => {
					if (res) {
						httpRequest.request('/api/Hotelordercl/delOrder', 'POST', {
							id
						}).then(res => {
							httpRequest.toast(res.msg)
							if (res.code == 1) {
								setTimeout(() => {
									uni.navigateBack(1)
								}, 1000)
							}
						})
					}
				})
			},
			// 取消订单
			cancelorder(id) {
				httpRequest.modal('', '确认取消当前订单吗？', true, (res) => {
					if (res) {
						httpRequest.request('/api/Hotelordercl/cancelOrder', 'POST', {
							id
						}).then(res => {
							httpRequest.toast(res.msg)
							if (res.code == 1) {
								this.init()
							}
						})
					}
				})
			},
			openlocation() {
				uni.openLocation({
					latitude: Number(this.dataAll.hotel.lat), //即将传到高德或腾讯地图的终点纬度  必须是数值，字符串无效
					longitude: Number(this.dataAll.hotel.lng), //即将传到高德或腾讯地图的终点经度  必须是数值，字符串无效
					name: this.dataAll.hotel.name, //即将传到高德或腾讯地图的店铺名称
					address: this.dataAll.hotel.detail, //即将传到高德或腾讯地图的详细地址
					scale: 18
				})
			},
			// 小程序获取当前位置信息
			getlocation() {
				let _this = this
				uni.getLocation({
					type: 'wgs64',
					geocode: true,
					success: function(res) {
						//逆地址解析  坐标转地址信息
						_this.lat = res.latitude
						_this.lng = res.longitude
						_this.init()
					}
				});
			},
			init() {
				let _this = this;
				httpRequest.request('/api/Hotelordercl/detail', 'GET', {
					id: this.listid,
					lat: this.lat,
					lng: this.lng
				}, false, false, false).then(res => {
					this.pageShow = true
					if (res.code == 1) {
						this.dataAll = res.data
					}
				}).catch(err => {
					httpRequest.toast(err.msg);
				})
			},

			djstime(endTime) {
				let startTime = (Date.parse(new Date())) / 1000;
				var timestamp = (Date.parse(new Date())) / 1000; //计算当前时间戳 (毫秒级)
				var date1 = ""; //开始时间
				if (timestamp < startTime) {
					date1 = startTime;
				} else {
					date1 = timestamp; //开始时间
				}
				var date2 = endTime; //结束时间
				// var date3 = date2.getTime() - date1.getTime(); //时间差的毫秒数
				var date3 = (date2 - date1) * 1000; //时间差的毫秒数
				//计算出相差天数
				var days = Math.floor(date3 / (24 * 3600 * 1000));
				//计算出小时数
				var leave1 = date3 % (24 * 3600 * 1000); //计算天数后剩余的毫秒数
				var hours = Math.floor(leave1 / (3600 * 1000));
				//计算相差分钟数
				var leave2 = leave1 % (3600 * 1000); //计算小时数后剩余的毫秒数
				var minutes = Math.floor(leave2 / (60 * 1000));
				//计算相差秒数
				var leave3 = leave2 % (60 * 1000); //计算分钟数后剩余的毫秒数
				var seconds = Math.round(leave3 / 1000);
				if (hours < 10) {
					hours = "0" + hours
				}
				if (minutes < 10) {
					minutes = "0" + minutes
				}
				if (seconds < 10) {
					seconds = "0" + seconds
				}
				return hours + "小时" + minutes + "分钟"
			},
			toComment() {
				uni.navigateTo({
					url: '/pages/my/fabiaopl?id=' + this.listid
				})
			},
			// 复制订单号
			copy(content) {
				uni.setClipboardData({
					data: content,
					success() {
						httpRequest.toast("复制成功")
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.huangbtn {
		width: 160rpx;
		height: 60rpx;
		border-radius: 30rpx 30rpx 30rpx 30rpx;
		font-size: 28rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
		border: 2rpx solid #FF9341;
		background-color: #FF9341;
	}

	.huibtn {
		width: 160rpx;
		height: 60rpx;
		border-radius: 30rpx 30rpx 30rpx 30rpx;
		font-size: 28rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		color: #333333;
		border: 2rpx solid #666666;
	}

	.xhbtn {
		width: 170rpx;
		height: 67rpx;
		font-size: 26rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		color: #FF9341;
		border-radius: 120rpx;
		border: 2rpx solid #FF9341;
	}

	.qxbtn {
		width: 170rpx;
		height: 67rpx;
		font-size: 26rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		color: #666666;
		border-radius: 120rpx;
		border: 2rpx solid #666666;
	}

	.kuandu {
		width: 150rpx;
	}

	.dticon {
		width: 52rpx;
		height: 52rpx;
	}

	.sptp {
		width: 150rpx;
		height: 150rpx;
		border-radius: 19rpx 19rpx 19rpx 19rpx;
	}

	.xhbtn {
		width: 160rpx;
		height: 60rpx;
		font-size: 26rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		color: #FF9341;
		border-radius: 120rpx;
		border: 2rpx solid #FF9341;
	}

	.qxbtn {
		width: 160rpx;
		height: 60rpx;
		font-size: 26rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		color: #666666;
		border-radius: 120rpx;
		border: 2rpx solid #666666;
	}
</style>